!<template>
  <div class="user-header">
    <el-button type="primary"
               @click="handleAdd">+新增</el-button>

    <el-form :inline="true"
             :model="formInline">
      <el-form-item label="请输入">
        <el-input v-model="formInline.keyWord"
                  placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="hendleSerch">搜索</el-button>
      </el-form-item>
    </el-form>

  </div>
  <div class="table">
    <el-table :data="list"
              style="width: 100%;height: 500px;">
      <el-table-column v-for="item in tableLabel"
                       :key="item.prop"
                       :label="item.label"
                       :prop="item.prop"
                       :width="item.width?item.width:125" />

      <el-table-column fixed="right"
                       label="操作"
                       width="180">
        <template #default="scope">
          <el-button size="small"
                     @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger"
                     size="small"
                     @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination small
                   background
                   layout="prev, pager, next"
                   :total="config.total"
                   @current-change="changePage"
                   class="pager mt-4" />
  </div>

  <el-dialog v-model="dialogVisible"
             :title="action==='add'?'新增用户':'编辑用户'"
             width="35%"
             :before-close="handleClose">

    <el-form :inline="true"
             :model="formUser"
             class="demo-form-inline"
             ref="userForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名"
                        prop="name"
                        :rules="[{
                          required:true,
                          message:'是必填项'
                        }]">
            <el-input v-model="formUser.name"
                      placeholder="请输入姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄"
                        prop="age"
                        :rules="[{
                          required:true,
                          message:'年龄是必填项'
                        },{
                          type:'number',
                          message:'年龄必须是数字'
                        }]">
            <el-input v-model.number="formUser.age"
                      placeholder="请输入年龄" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="性别"
                        prop="sex"
                        :rules="[{
                          required:true,
                          message:'性别是必填项'
                        }]">
            <el-select v-model="formUser.sex"
                       placeholder="请选择">
              <el-option label="男"
                         value="1" />
              <el-option label="女"
                         value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期"
                        prop="birth"
                        :rules="[{
                          required:true,
                          message:'出生日期是必填项'
                        }]">
            <el-date-picker v-model="formUser.birth"
                            type="date"
                            label="出生日期"
                            placeholder="请输入"
                            style="width: 100%"
                            value-format="YYYY-MM-DD" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-form-item label="地址"
                      prop="addr">
          <el-input v-model="formUser.addr"
                    placeholder="请输入地址" />
        </el-form-item>
      </el-row>
      <el-row style="justify-content: flex-end;">
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary"
                     @click="onSubmit">确定</el-button>
        </span>
      </el-row>
    </el-form>

  </el-dialog>
</template>

<script>
import { time } from "echarts";
import { ElMessage } from "element-plus";
import { defineComponent, getCurrentInstance, onMounted, reactive, ref } from "vue";
export default defineComponent({
  setup () {
    const { proxy } = getCurrentInstance();
    const list = ref([]);
    const config = reactive({
      total: 0,
      page: 1,
      name: ''
    });
    const tableLabel = reactive([
      { prop: "name", label: "姓名" },
      { prop: "age", label: "年龄" },
      { prop: "sexLabel", label: "性别" },
      { prop: "birth", label: "出生日期", width: 200 },
      { prop: "addr", label: "地址", width: 320 },
    ]);

    onMounted(() => {
      getUser(config);
    });
    const getUser = async (config) => {
      let res = await proxy.$api.getUserData(config);
      config.total = res.count;
      list.value = res.list.map((item) => {
        item.sexLabel = item.sex === 0 ? "女" : "男";
        return item;
      });
    };

    const changePage = (page) => {
      config.page = page;
      getUser(config);
    };

    const formInline = reactive({
      keyWord: "",
    })

    const hendleSerch = () => {
      config.name = formInline.keyWord;
      getUser(config);
    };

    //控制模态框的显示隐藏
    const dialogVisible = ref(false);


    const handleClose = (done) => {
      ElMessageBox.confirm('是否确定关闭此对话框?')
        .then(() => {
          proxy.$refs.userForm.resetFields();
          done()
        })
        .catch(() => {
          // catch error
        })
    };

    //添加用户的form数据
    const formUser = reactive({
      name: "",
      age: "",
      sex: "",
      birth: "",
      addr: ""
    });

    //添加用户
    const onSubmit = () => {
      proxy.$refs.userForm.validate(async (valid) => {
        if (valid) {
          if (action.value == 'add') { //新增接口
            let res = await proxy.$api.addUser(formUser);
            //if (res) { 添加成功后刷新
            dialogVisible.value = false;
            proxy.$refs.userForm.resetFields();
            //}
            getUser(config);
          } else {//编辑接口
            formUser.sex = formUser.sex == '女' ? 0 : 1;
            let res = await proxy.$api.updateUser(formUser);
            //if (res) { 添加成功后刷新
            dialogVisible.value = false;
            proxy.$refs.userForm.resetFields();
            //}
            getUser(config);
          }
        } else {
          ElMessage({
            showClose: true,
            message: 'Oops, this is a error message.',
            type: 'error',
          });
        }

      });
    };
    //取消添加
    const handleCancel = () => {
      dialogVisible.value = false;
      proxy.$refs.userForm.resetFields();
    };

    //区分编辑/新增
    const action = ref('add');
    //编辑用户
    const handleEdit = (row) => {
      action.value = "edit";
      dialogVisible.value = true;
      //浅拷贝 实现编辑赋值
      row.sex = row.sex == 0 ? '女' : '男';
      proxy.$nextTick(() => {
        Object.assign(formUser, row);
      })
    };
    //新增用户
    const handleAdd = () => {
      action.value = "add";
      dialogVisible.value = true;
    };

    //删除用户
    const handleDelete = (id) => {
      ElMessageBox.confirm('确定删除吗?')
        .then(async () => {
          await proxy.$api.deleteUser({ id: id });
          ElMessage({
            showClose: true,
            message: '删除成功!',
            type: 'success',
          });

          getUser(config);
        })
        .catch(() => {
          // catch error
        })
    }

    return {
      list,
      tableLabel,
      config,
      changePage,
      formInline,
      hendleSerch,
      dialogVisible,
      handleClose,
      formUser,
      onSubmit,
      handleCancel,
      handleEdit,
      action,
      handleAdd,
      handleDelete
    }
  }
})
</script>

<style lang="less" scoped>
.table {
  position: relative;
  height: 550px;
  .pager {
    position: relative;
    right: 0px;
    bottom: -20px;
  }
}
.user-header {
  display: flex;
  justify-content: space-between;
}
</style>